
    
      document.addEventListener('DOMContentLoaded', function() {
        const carouselTrack = document.getElementById('carouselTrack');
        const panels = document.querySelectorAll('.panel:not(.clone)'); // 不包括克隆的面板
        const dots = document.querySelectorAll('.dot');
        let currentIndex = 0;
        let autoPlayInterval;
        const panelWidth = 100; // 百分比
        const totalPanels = panels.length; // 5个实际面板

        // 更新轮播状态
        function updateCarousel() {
          // 移动轨道（整个容器）
          carouselTrack.style.transform = `translateX(-${currentIndex * panelWidth}%)`;
          
          // 更新指示点 - 当显示克隆面板时，激活第一个指示点
          //index为dots中每一个元素的索引
          const dotIndex = currentIndex === totalPanels ? 0 : currentIndex;
          dots.forEach((dot, index) => {
            dot.classList.toggle('active', index === dotIndex);
          });
        }

        // 下一张
        function nextSlide() {
          // 如果是最后一个实际面板，继续滑动到克隆面板
          if (currentIndex === totalPanels - 1) {
            currentIndex++; // 移动到克隆面板
            updateCarousel();
            
            // 当过渡完成后，立即切换回第一个面板（无过渡动画） 
            setTimeout(() => {
              
              carouselTrack.style.transition = 'none';
              currentIndex = 0;
              // 直接跳转到真正的第一个面板位置
              carouselTrack.style.transform = `translateX(-${currentIndex * panelWidth}%)`;
              // 强制重绘
              void carouselTrack.offsetWidth;
              // 重新启用过渡动画
              carouselTrack.style.transition = 'transform 0.5s ease-in-out';

            }, 500); // 延时执行的时间正好和CSS过渡时间相同  精髓"刚好移动到克隆面板后立即执行到真正的第一个面板"
          } else {
            currentIndex = (currentIndex + 1) % totalPanels;
            updateCarousel();
          }
        }


        //  上一张
        function prevSlide() {
          // 如果是第一个实际面板，跳转到克隆面板位置
          if (currentIndex === 0) {
            currentIndex = totalPanels - 1;
          } else {
            currentIndex = (currentIndex - 1 + totalPanels) % totalPanels;
          }
          // 强制重绘
            void carouselTrack.offsetWidth;
          updateCarousel();
        }

        // 开始自动播放
        function startAutoPlay() {
          autoPlayInterval = setInterval(nextSlide, 3000); // 每3秒切换一次
        }
    
        // 停止自动播放
        function stopAutoPlay() {
          clearInterval(autoPlayInterval);
        }

        //为小点添加点击事件
        dots.forEach((dot,index) => {
            dot.addEventListener('click', () =>{
                stopAutoPlay();
                currentIndex = index;
                updateCarousel();
                startAutoPlay();
            })
        })

        // 为按钮添加点击事件
        const btnPre = document.querySelector('.buttons_pre');
        const btnNext = document.querySelector('.buttons_next');

        btnNext.addEventListener('click', () => {
          stopAutoPlay();
          nextSlide();
          startAutoPlay();
        });




        btnPre.addEventListener('click', () => {
          stopAutoPlay();
          prevSlide();
          updateCarousel();
          startAutoPlay();
        });

  



        // 初始化自动播放
        startAutoPlay();
      });
    